<template>
  <a-card :title="id ? '路由编辑' : '路由添加'">
    <a-form
      :model="formState"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      :rules="rules"
      @finish="onFinish"
      autocomplete="off"
    >
      <a-form-item label="路由id" v-if="id">
        <a-input v-model:value.trim="id" disabled />
      </a-form-item>
      <a-form-item label="关联微应用" name="microAppId">
        <a-select v-model:value="formState.microAppId">
          <a-select-option
            v-for="item in microAppListMaps"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="路由名称" name="title">
        <a-input v-model:value.trim="formState.title" />
      </a-form-item>
      <a-form-item label="类型" name="type">
        <a-select v-model:value="formState.type">
          <a-select-option
            v-for="item in menuTypeList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="关联菜单">
        <a-select v-model:value="formState.parentId" allowClear>
          <a-select-option
            v-for="item in menuList"
            :key="item.id + ''"
            :value="item.id + ''"
            :disabled="item.id === id"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="路由地址" name="path" v-if="formState.type !== 3">
        <a-input v-model:value.trim="formState.path" />
      </a-form-item>
      <a-form-item label="ICON">
        <FormIcon v-model:value="formState.icon" />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">
          {{ id ? "更新" : "添加" }}
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>


<script setup>
import { onMounted, ref } from "vue";
import FormIcon from "@/components/FormIcon";
import { message } from "ant-design-vue";
import {
  microAppList,
  microAppRouterList,
  microAppRouterAdd,
  microAppRouterEdit,
  microAppRouterDetail,
} from "@/api/microApp";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const id = route.query?.id - 0 || null;

/**
 * 菜单类型
 */
const menuTypeList = [
  {
    value: "1",
    label: "目录",
  },
  {
    value: "2",
    label: "内链",
  },
  {
    value: "3",
    label: "外链",
  },
];

// 菜单列表
const menuList = ref([]);
// 微应用列表
const microAppListMaps = ref([]);

const formState = ref({
  title: "",
  type: "2", // 内部连接
  path: "", // 路由地址
  icon: "", // 图标
  parentId: "", // 父级id
  microAppId: "", // 关联微应用
});

/**
 * 规则
 */
const rules = {
  microAppId: [
    {
      required: true,
      message: "请选择微应用",
      trigger: "blur",
    },
  ],
  title: [
    {
      required: true,
      message: "请输入路由名称",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      trigger: "blur",
    },
  ],
  path: [
    {
      required: !formState.value.menuType,
      message: "请输入路由地址",
      trigger: "blur",
    },
  ],
  component: [
    {
      required: !formState.value.menuType,
      message: "请输入组件地址",
      trigger: "blur",
    },
  ],
};

const onFinish = async (values) => {
  console.log("Success:", values, formState.value);
  const { title, type, path, icon, parentId, microAppId } = formState.value;
  // id 存在则更新
  if (id) {
    microAppRouterEditFun({
      title,
      type,
      icon,
      parentId,
      microAppId,
      path: type === 3 ? "" : path,
      meta: {
        title: title,
      },
      id: id,
    });
    return;
  }

  microAppRouterAddFun({
    title,
    type,
    icon,
    parentId,
    microAppId,
    path: type === 3 ? "" : path,
    meta: {
      title: title,
    },
  });
};

/**
 * 获取微应用列表
 */
const microAppListFun = async () => {
  const { msg, data, success } = await microAppList({});
  if (success) {
    console.log(data);
    microAppListMaps.value = data.rows || [];
  } else {
    message.error(msg);
    microAppListMaps.value = [];
  }
};
/**
 * 获取微应用路由列表
 */
const microAppRouterListFun = async () => {
  const { msg, data, success } = await microAppRouterList({});
  if (success) {
    console.log(data);
    menuList.value = data.rows || [];
  } else {
    message.error(msg);
    menuList.value = [];
  }
};
/**
 * 初始化
 */
const init = async () => {
  await microAppRouterListFun();
  await microAppListFun();
};

/**
 * 微应用路由添加
 * @param {*} data
 */
const microAppRouterAddFun = async (data) => {
  const { msg, success } = await microAppRouterAdd(data);
  if (success) {
    message.success("新增成功");
    router.push({
      path: "/microAppRouter",
    });
  } else {
    message.error(msg);
  }
};

/**
 * 编辑
 * @param {*} data
 */
const microAppRouterEditFun = async (data) => {
  const { msg, success } = await microAppRouterEdit(data);
  if (success) {
    message.success("编辑成功");
    router.push({
      path: "/microAppRouter",
    });
  } else {
    message.error(msg);
  }
};

/**
 * 获取路由详情
 * @param {*} data
 */
const microAppRouterDetailFun = async (id) => {
  const { msg, success, data } = await microAppRouterDetail({ id });
  if (success) {
    console.log(data);
    formState.value = {
      title: data.title,
      type: data.type, // 内部连接
      path: data.path, // 路由地址
      icon: data.icon, // 图标
      parentId: data.parentId, // 父级id
      microAppId: data.microAppId - 0, // 关联微应用
    };
  } else {
    message.error(msg);
  }
};

onMounted(async () => {
  init();
  if (id) {
    microAppRouterDetailFun(id);
  }
});
</script>
